<template>
	<div class="container">
    <header-compent activeName="order" :agent="agent" :usertype="usertype" :is_manager="is_manager"></header-compent>
    	<div class="page-header"><div  class="el-page-header"><div class="el-page-header__content">订单管理</div></div></div>
    	
    	<div class="page-body">
 			
 			 <el-table
			    :data="orderList"
			    stripe
			    style="width: 100%"
			    >
				 <el-table-column
			      prop="id"
			      label="订单ID"
			      >
			    </el-table-column>
			    <el-table-column
			      prop="create_time"
			      label="创建时间"
			      >
			    </el-table-column>
			    <el-table-column
			      prop="months"
			      label="购买月数"
			      >
			    </el-table-column>
			    <el-table-column
			      prop="active_code_cnt"
			      label="激活码数量"
			      >
			    </el-table-column>
			     <el-table-column
			      prop="amount"
			      label="总金额"
			      >
			       <template slot-scope="scope">
			       	{{scope.row.amount/100}}
			       </template>
			    </el-table-column>
			    
			     <!--<el-table-column
			      prop="trade_no"
			      label="激活码"
			      >
			    </el-table-column>-->
			    <!--状态：1待付款，2已付款，3付款失败，4已退款-->
			    <el-table-column
			      prop="status"
			      label="订单状态"
			     >
			      <template slot-scope="scope">
			       	<span v-if="scope.row.status==1">
				    	未付款
				    </span>
				    <span v-if="scope.row.status==2">
				    	已付款
				    </span>
				    <span v-if="scope.row.status==3">
				    	付款失败
				    </span>
				    <span v-if="scope.row.status==4">
				    	已退款
				    </span>
				
			      </template>
			    </el-table-column>
			    
			    
			
			    <el-table-column
			      prop="active_status"
			      label="激活状态"
			     >
			      <template slot-scope="scope">
			       	<span v-if="scope.row.active_status==0">无效</span>
				    <span v-if="scope.row.active_status==1">激活中，等待专员激活</span>
				    <span v-if="scope.row.active_status==2">已完成激活</span>
				  
			      </template>
			    </el-table-column>
		
				 <el-table-column
			      prop="active_status"
			      label="操作"
			     >
			      <template slot-scope="scope">
				    <el-button size="mini" type="primary" class="ml10" @click="showActiveUsers(scope.row.id)" v-if="scope.row.active_status>0">查看激活名单</el-button>
			      </template>
			    </el-table-column>
		
		
			  </el-table>
 			
 			 <div class="mt20 mb20">
				    <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="query.page"
				      :page-sizes="[10, 20, 30, 50]"
				      :page-size="query.limit"
				      layout="total, sizes, prev, pager, next"
				      :total="total">
				    </el-pagination>
			 </div>
			  
    		
    		
    	</div>
    	
    	<el-dialog title="订单激活用户" :visible.sync="dialogOrderListVisible" width="970px">
	    	 <el-table
			    :data="orderUserList"
			    stripe
			    style="width: 100%"
			    >
			    <el-table-column
			      prop="id"
			      label="ID"
			      >
			    </el-table-column>
			    
			    <el-table-column
			      prop="open_userid"
			      label="用户名"
			      >
			       <template slot-scope="scope">
						<ww-open-data type="userName" :openid="scope.row.open_userid" v-if="agent==1" />
						<span v-else>{{scope.row.open_userid}}</span>
				    </template>
			    </el-table-column>
			    <el-table-column
			      prop="create_time"
			      label="时间"
			      >
			    </el-table-column>
			    
				<el-table-column
			      prop="status"
			      label="激活状态"
			     >
			      <template slot-scope="scope">
			       	<span v-if="scope.row.status==0">无效</span>
				    <span v-if="scope.row.status==1">激活中，等待专员激活</span>
				    <span v-if="scope.row.status==2">已激活</span>
				    <span v-if="scope.row.status==3">激活失效</span>
			      </template>
			   </el-table-column>
			</el-table>    
		 
    	</el-dialog>
    	
    	
    	
    </div>
</template>

<script>
import { postOrderList,postOrderActiveDetail} from "../api/index";	
import Cookies from "js-cookie";
import HeaderCompent from "./header.vue";


export default {
  name: 'index',
   components: {
	HeaderCompent
  },
  data () {
    return {
	    isSending:false,
	    orderList:[],
	   
	    query:{
	    	page:1,
	    	limit:10
	    },
	    total:0,
	 

	 
	    agent:Cookies.get('agent') || '0',
	    usertype:Cookies.get('usertype') || '0',
	    orderUserList:[],
	    dialogOrderListVisible:false,
      is_manager: Cookies.get('is_manager') || 0,

	    
    }
  
  },
  methods:{
  	showActiveUsers(e){
  		if(this.isSending == true){
			console.log('请稍等');
			return false;
		}
	   	
	   	this.isSending = true;
  		postOrderActiveDetail({order_id:e}).then((res) => {
	     
	      	this.isSending = false;
	        let { msg, code, data } = res.data;
	      	
			if(code == 200){
				
				this.orderUserList = data.list;
				this.dialogOrderListVisible = true;
				
			}
	
	        
	        
	      },reject=>{
	      	 this.isSending = false;
	      	 let { msg, code, data } = reject.data;
	      	 if(code == 401){
	      	 	Cookies.remove('token');
	      	 	this.$router.push('/login')
	      	 }
	      	 
	      });
  	},
  	handleSizeChange(e){
  		this.query.limit = e;
  		this.fnGetOrderList();
  	},
  	handleCurrentChange(e){
  		this.query.page = e;
  		this.fnGetOrderList();
  		
  	},


  	//获取用户列表
   	fnGetOrderList(){
		if(this.isSending == true){
			console.log('请稍等');
			return false;
		}
	   	
	   	 this.isSending = true;
	   	 postOrderList(this.query
	     ).then((res) => {
	     
	      	this.isSending = false;
	        let { msg, code, data } = res.data;
	      	
			if(code == 200){
				this.orderList = data.list.data;
				this.total = data.list.total;
			}
	
	        
	        
	      },reject=>{
	      	 this.isSending = false;
	      	 let { msg, code, data } = reject.data;
	      	 if(code == 401){
	      	 	Cookies.remove('token');
	      	 	this.$router.push('/login')
	      	 }
	      	 
	      });
   	},
   	
  },
  created(){
  	 console.log(process.env.BASE_API)
  	 console.log(process.env.PAY_MONTH)
  	  this.token = Cookies.get('token');
  	  if(!this.token){
  	  	this.$router.push('/login');
  	  }
  	  else{
  	  	this.fnGetOrderList();

  	  }
	
  },
  mounted(){

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  type="text/scss" lang="scss" >

	.item{
		margin: 20px auto;
	}
	.qr-code {
	  text-align: center;
	  .subtitle {
	    padding: 15px 0 30px;
	  }
	  .tips {
	    padding-top: 25px;
	    img{
	    	margin-right: 10px;
	    }
	  }
	}
	
	.help_title {
	  text-align: left;
	  .subtitle {
	    padding: 10px;
	  }
	  .tips {
	    padding-top: 25px;
	    img{
	    	margin-right: 10px;
	    }
	  }
	}
</style>
